<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE >
<html>
  <head>
    <title>datagrid</title>
    <jsp:include page="/common/inc/meta.jsp"></jsp:include>
    <jsp:include page="/common/inc/easyui.jsp"></jsp:include>
	<link rel="stylesheet" type="text/css" href="demo.css">
<script>
	var dialog_add;
	var test;
	var addForm;
	$(function() {
		//form表单组件
		addForm = $('#addForm').form();

		addForm.find('input').on('keyup', function(event) {/* 增加回车提交功能 */
			if (event.keyCode == '13') {
				addForm.submit();
			}
		});

		dialog_add = $('#dialog_add').show().dialog({//添加，修改
			modal : true,
			title : '用户信息',
			buttons : [ {
				text : '确定',
				handler : function() {
					if (addForm.find('[name=id]').val() != '') {
						addForm.form('submit', {
							url : sy.bp() + '/testController.do?updateUser',
							success : function(data) {
								dialog_add.dialog('close');
								$.messager.show({
									msg : '用户编辑成功！',
									title : '提示'
								});
								test.datagrid('reload');
							}
						});
					} else {
						addForm.form('submit', {
							url : sy.bp() + '/testController.do?addUser',
							success : function(data) {
								try {
									if (data) {
										dialog_add.dialog('close');
										$.messager.show({
											msg : '用户创建成功！',
											title : '提示'
										});
										test.datagrid('reload');
									}
								} catch (e) {
									dialog_add.dialog('close');
									$.messager.show({
										msg : '用户名称已存在！',
										title : '提示'
									});
								}
							}
						});
					}
				}
			} ]
		}).dialog('close');

		//grid表格组件
		test = $('#test')
				.datagrid(
						{
							title : '表格',
							iconCls : 'icon-save',
							width : 950,
							height : 300,
							nowrap : false,
							striped : true,
							collapsible : true,
							url : sy.bp() + '/testController.do?datagrid',

							sortName : 'name',
							sortOrder : 'desc',
							remoteSort : false,
							idField : 'id',
							frozenColumns : [ [ {
								field : 'ck',
								checkbox : true
							}, {
								title : 'id',
								field : 'id',
								width : 150,
								sortable : true
							}, ] ],
							columns : [ [ {
								title : 'Base Information',
								colspan : 4
							}, {
								field : 'opt',
								title : 'Operation',
								width : 100,
								align : 'center',
								rowspan : 2,
								formatter : function(value, rec, index) {
									return value + "-" + rec + "-" + index
								}
							} ], [ {
								field : 'name',
								title : 'Name',
								width : 120
							}, {
								field : 'password',
								title : 'password',
								width : 220,
								rowspan : 2,
								sortable : true,
								formatter : function(value, rowData, rowIndex) {
									return '******';
								}
							}, {
								field : 'createdatetime',
								title : 'createdatetime',
								width : 150,
								rowspan : 2
							}, {
								field : 'modifydatetime',
								title : 'modifydatetime',
								width : 150,
								rowspan : 2
							} ] ],
							pagination : true,
							pageSize : 2,
							pageList : [ 2, 5, 10 ],
							rownumbers : true,
							toolbar : [
									{
										id : 'btnAdd',
										text : '添加',
										iconCls : 'icon-add',
										handler : function() {
											addForm.form('clear');
											dialog_add.dialog('open');
										}
									},
									'-',
									{
										id : 'btnDelete',
										text : '删除',
										iconCls : 'icon-remove',
										handler : function() {
											var ids = [];
											var rows = test
													.datagrid('getSelections');
											if (rows.length > 0) {
												$.messager
														.confirm(
																'请确认',
																'您要删除当前所选项目？',
																function(r) {
																	if (r) {
																		for ( var i = 0; i < rows.length; i++) {
																			ids
																					.push(rows[i].id);
																		}
																		$
																				.ajax({
																					url : sy
																							.bp()
																							+ '/testController.do?del',
																					data : {
																						ids : ids
																								.join(',')
																					},
																					cache : false,
																					dataType : "json",
																					success : function(
																							response) {
																						test
																								.datagrid('unselectAll');
																						test
																								.datagrid('reload');
																						$.messager
																								.show({
																									title : '提示',
																									msg : '删除成功！'
																								});
																					}
																				});
																	}
																});
											} else {
												$.messager.alert('提示',
														'请选择要删除的记录！', 'error');
											}
										}
									},
									'-',
									{
										id : 'btnEdit',
										text : '修改',
										disabled : false,
										iconCls : 'icon-edit',
										handler : function() {
											var rows = test
													.datagrid('getSelections');
											if (rows.length != 1
													&& rows.length != 0) {
												var names = [];
												for ( var i = 0; i < rows.length; i++) {
													names.push(rows[i].name);
												}
												$.messager.show({
													msg : '只能择一个用户进行编辑！您已经选择了【'
															+ names.join(',')
															+ '】' + rows.length
															+ '个用户',
													title : '提示'
												});
											} else if (rows.length == 1) {
												dialog_add.dialog('open');
												addForm
														.form(
																'load',
																{
																	id : rows[0].id,
																	name : rows[0].name,
																	password : '',
																	createdatetime : rows[0].createdatetime,
																	modifydatetime : rows[0].modifydatetime,
																});
											} else {
												$.messager.show({
													msg : '请选择一个用户进行编辑！',
													title : '提示'
												});
											}
										}
									}, '-' ]
						});
		var p = $('#test').datagrid('getPager');
		$(p).pagination({
			onBeforeRefresh : function() {
				test.datagrid('reload');
			}
		});
		function resize() {
			$('#test').datagrid('resize', {
				width : 700,
				height : 400
			});
		}
		function getSelected() {
			var selected = $('#test').datagrid('getSelected');
			if (selected) {
				alert(selected.code + ":" + selected.name + ":" + selected.addr
						+ ":" + selected.col4);
			}
		}
		function getSelections() {
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			for ( var i = 0; i < rows.length; i++) {
				ids.push(rows[i].code);
			}
			alert(ids.join(':'));
		}
		function clearSelections() {
			$('#test').datagrid('clearSelections');
		}
		function selectRow() {
			$('#test').datagrid('selectRow', 2);
		}
		function selectRecord() {
			$('#test').datagrid('selectRecord', '002');
		}
		function unselectRow() {
			$('#test').datagrid('unselectRow', 2);
		}
		function mergeCells() {
			$('#test').datagrid('mergeCells', {
				index : 2,
				field : 'addr',
				rowspan : 2,
				colspan : 2
			});
		}
	});
</script>
</head>
<body>

	<table id="test"></table>

	<div id="dialog_add" icon="icon-save"
		style="padding:5px;width:260px;height:210px;">
		<form id="addForm" method="post">
			<table class="tableForm">
				<tr>
					<td align="right"><input type="hidden" name="id" />用户名：</td>
					<td><input type="text" name="name" class="easyui-validatebox"
						required="true">
					</td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td><input type="password" name="password"
						class="easyui-validatebox" required="true">
					</td>
				</tr>
				<tr>
					<th>重复密码</th>
					<td><input name="rePassword" type="password"
						class="easyui-validatebox" required="true"
						validType="eqPassword['#addForm input[name=password]']" />
					</td>
				</tr>
				<tr>
					<td align="right">创建时间：</td>
					<td><input id="creDate" class="easyui-datetimebox"
						name="createdatetime" editable="fasle" style="width:150px">
					</td>
				</tr>
				<tr>
					<td align="right">修改时间：</td>
					<td><input id="endupdate" class="easyui-datetimebox"
						name="modifydatetime" editable="fasle" style="width:150px">
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>